<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0 auto;
			}
			th{
				padding: 0 20px;
			}
			
		</style>
	</head>
	<body>
		<table border="1px" bordercolor="red" cellspacing="0px">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<script type="text/javascript">
			var arr = [];
			var obj = {};
			var str = '';
			var th = document.getElementsByTagName("th");
			var tbody = document.getElementsByTagName("tbody")[0];
			
//			window.onload = function (){
//				var getArr = localStorage.newArr;
//				if(getArr){
//					arr = JSON.parse(getArr);
//					showPage(arr);
//				}
//				
//			}
			
			for(var i = 0;i < 5;i++){
					obj = {
					id: i + 1,
					name:"kky" + i,
					age:18,
					xingbie:"男",
					hobby:"游戏"
				}
				arr.push(obj);
				newArr = JSON.stringify(arr);
				localStorage.newArr = newArr;				
			}			
			
			console.log(arr);
			
			newArr = JSON.stringify(arr);
			localStorage.newArr = newArr;
			showPage(arr);
			function showPage(arr){
				str = "";
				for(var i = 0;i<arr.length;i++){
					str += `
						<tr>
							<td>${i + 1}</td>
							<td>${arr[i].name}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].xingbie}</td>
							<td>${arr[i].hobby}</td>
							<td>
								<input class="up" type="button" value="上移" onclick="up(${arr[i].id})"/>
								<input class="del" type="button" value="删除" onclick="del(${arr[i].id})"/>
								<input class="down" type="button" value="下移" onclick="down(${arr[i].id})"/>
							</td>
						</tr>		
					
					`
				}
				tbody.innerHTML = str;	
			}
			var upPress = document.querySelectorAll(".up");
			var delPress = document.querySelectorAll(".del");
			var downPress = document.querySelectorAll(".down");
			var gdp = [];
			console.log("up:",upPress[0]);
			upPress[0].disabled = true;
			
			function up(id){
				for(var i = 1;i < arr.length;i++){
					if(id == arr[i].id){
						gdp = arr[i];
						arr[i] = arr[i - 1];
						arr[i - 1] = gdp;
						var tem;
						for(var c = 0; c <= arr.length;c++ ){
							for(var d = c + 1;d<arr.length;d++){
								if(arr[c].id > arr[d].id){
									tem = arr[c].id;
									arr[c].id = arr[d].id;
									arr[d].id = tem;
								}
							}
						}
						newArr = JSON.stringify(arr);
						localStorage.newArr = newArr;
						//upPress[0].disabled = true;
						showPage(arr);	
					}
				}
			}
			console.log(upPress[0])
			function del(id){
				for(var i = 0;i < arr.length;i++){
					if(id == arr[i].id){
						arr.splice(i,1);
						console.log("arr:",arr);
						showPage(arr);
					}
				}
			}
			downPress[downPress.length - 1].disabled = true;
			
			var gdpd = [];
			function down(id){
				for(var i = 0;i < arr.length - 1;i++){
					if(id == arr[i].id){
						gdpd = arr[i];
						arr[i] = arr[i + 1];
						arr[i + 1] = gdpd;
						var tem;
						for(var c = 0; c <= arr.length;c++ ){
							for(var d = c + 1;d<arr.length;d++){
								if(arr[c].id > arr[d].id){
									tem = arr[c].id;
									arr[c].id = arr[d].id;
									arr[d].id = tem;
								}
							}
						}
						newArr = JSON.stringify(arr);
						localStorage.newArr = newArr;
						//upPress[0].disabled = true;
						showPage(arr);	
					}
				}
			}
			
			
		</script>
	</body>
</html>
